<template>
    <div class="daily">
        <div class="type-nav">
            <a href="#role"><el-button>角色天赋材料</el-button></a>
            <a href="#weapon"><el-button>武器突破材料</el-button></a>
        </div>
        <div id="role">
            <tittle-one>角色 （{{wrole.length}}个）</tittle-one>
            <div v-if="week!==0">
                <role-box color="green" :week="week" :wrole="wrole" :book="book" :dlt="0" key="1"></role-box>
                <role-box color="gold" :week="week" :wrole="wrole" :book="book" :dlt="1" key="2"></role-box>
                <role-box color="purple" :week="week" :wrole="wrole" :book="book" :dlt="2" key="3"></role-box>
            </div>
            <div v-else>
                <role-box :week="week" :wrole="wrole" :book="book" :cfit="true" :dlt="0" key="4"></role-box>
            </div>
        </div>
        <div id="weapon">
            <tittle-one>武器 （{{wweapon.length}}个）</tittle-one>
            <div v-if="week!==0">
                <weapon-box color="green" :week="week" :wweapon="wweapon" :cl="wqcl" :dlt="0"></weapon-box>
                <weapon-box color="gold" :week="week" :wweapon="wweapon" :cl="wqcl" :dlt="1"></weapon-box>
                <weapon-box color="purple" :week="week" :wweapon="wweapon" :cl="wqcl" :dlt="2"></weapon-box>
            </div>
            <div v-else>
                <weapon-box :week="week" :wweapon="wweapon" :cl="wqcl" :dlt="0"></weapon-box>
            </div>
        </div>
    </div>
</template>

<script>
  import TittleOne from '../temp/TittleOne.vue'
  import TittleTwo from '../temp/TittleTwo.vue'
  import RoleBox from '../temp/RoleBox.vue'
  import WeaponBox from '../temp/WeaponBox.vue'
  import * as com from '@/data/com'

  export default {
    name: "Daily",
    components: {
      TittleOne,
      TittleTwo,
      RoleBox,
      WeaponBox,
    },
    props: {
      role: Array,
      weapon: Array,
      week: {
        type: Number,
        default() {
          return 1
        }
      }
    },
    data() {
      return {
        wrole: [],
        wweapon: [],
        book: [],
        wqcl: [],
        mhy: com.mhy,
      }
    },
    methods: {
        init() {
          this.wrole = []
          this.wweapon = []
          this.book = com.Book
          this.wqcl = com.Cl

          this.role.forEach(r => {
            // 获取星期相关
            if(this.week === 0 || r.week === this.week) {
              // 获取天赋书名
              for(let bk of this.book) {
                if(r.book === bk.book) {
                  r.book_name = bk.book_name
                }
              }
              // 获取地区、元素。。
              this.wrole.push(r)
            }
          });
          this.weapon.forEach(w => {
            // 获取星期相关
            if(this.week === 0 || w.week === this.week) {
              // 获取天赋书名
              for(let c of this.wqcl) {
                if(w.cl === c.cl) {
                  w.cl_name = c.cl_name
                }
              }
              // 获取地区、元素。。
              this.wweapon.push(w)
            }
          });

          console.log('角色列表', this.wrole);
          console.log('武器列表', this.wweapon);
        }
    },
    async created() {
      this.init()
      console.log('天赋书索引', this.book);
    },
    watch: {
      week() {
        this.init()
      }
    },
  }
</script>

<style lang="less" scoped>
    .daily {
        .type-nav {
            width: 100%;
            margin: 1rem 0;
            display: flex;
            a {
                width: 100%;
                display: block;
                text-decoration: none;
                .el-button {
                    margin: 0 2px;
                    width: 100%;
                }
            }
        }
        #role {
            margin-bottom: 1rem;
        }
        #weapon {
            margin-bottom: 1rem;

        }
    }
</style>
